<template>
	<view class="page">
		<view class="title">
			<!-- <text>所有课程</text> -->
			<view class="addButton" @click="jumpToAddCourse()">
				发布课程
			</view>
		</view>
		<!-- 类型 -->
		<view class="course_class">
			<view v-for="(item, index) in courseType" :key="index">
				<view :class="{'course_active': item.type == currentType}" @click="changeType(item.type)">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 课程信息 -->
		<view class="course_info" v-for="(item, index) in courseList" :key="index" v-if="item.status == currentType" >
			<image mode="aspectFit" :src="item.imageUrl" @click="jumpToAddCourse(item)"></image>
			<view class="course_detail">
				<view @click="jumpToAddCourse(item)" style="width: 300rpx;">
					<view>《{{item.name}}》</view>
					<text style="font-size: 30rpx;margin: 10rpx;color: #FF5A5F;">￥{{item.price}}</text>
				</view>
				<button class="course_btn" @click="sendCourse(item._id, index)" v-if="item.status == '未发布'">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk'
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	let that, _openid;
	
	export default {
		data() {
			return {
				courseList: [],
				courseType: [
					{
						name: '未发布',
						type: '未发布'
					},{
						name: '已发布',
						type: '已发布'
					}
				],
				currentType: '未发布'
			}
		},
		onLoad() {
			that = this;
			_openid = getApp().globalData.userInfo._openid; 
			// console.log(_openid);
			// 获取全部课程
			db.collection('course').get().then(res=>{
				console.log(res.data);
				this.courseList = res.data;
				// 获取图片链接
				res.data.forEach(item=>{
					cloudbase.getTempFileURL({
						fileList: [item.imageUrl]
					}).then(res => {
						if(res.fileList[0].tempFileURL){
							item.imageUrl = res.fileList[0].tempFileURL;
						}
					});
				})
			})
		},
		methods: {
			jumpToAddCourse: function(item) {
				if(item){
					uni.navigateTo({
						url: '../addCourse/addCourse?item=' + JSON.stringify(item)
					})
				}else{
					uni.navigateTo({
						url: '../addCourse/addCourse'
					})
				}
				
				
			},
			
			changeType: function(type){
				this.currentType = type;
			},
			
			sendCourse: function(_id, index){
				let that = this;
				db.collection('course').where({
					_id
				}).update({
					status: '已发布'
				}).then(res=>{
					console.log(res);
					uni.showToast({
						title: '发布成功',
						icon: 'success',
						duration: 1500
					})
					that.courseList[index].status = '已发布';
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F5F7;
	}
	
	.page {
		width: 750rpx;
		height: 1812rpx;
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.title {
		width: 702rpx;
		height: 60rpx;
		margin-right: auto;
		margin-left: auto;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #44454A;
		display: inline-block;
	}

	.addButton {
		float: right;
		width: 120rpx;
		height: 60rpx;
		border-radius: 15rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #FF9400;
		text-align: center;
		box-shadow: 0 3px 6px;
		/* display: inline-block; */
	}
	
	.course_class{
		display: flex;
		justify-content: space-around;
		margin: 0rpx 25rpx;
	}
	
	.course_info{
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx 0;
		border-radius: 16rpx;
		display: flex;
	}
	.course_info image{
		height: 150rpx;
		width: 150rpx;
	}
	.course_detail{
		display: flex;
		width: max-content;
		align-items: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		width: calc(100% - 150rpx);
	}
	.author{
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #999;
	}
	.course_btn{
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		margin-right: 0rpx;
		line-height: 50rpx;
		height: 50rpx;
	}
	.course_active{
		font-weight: bold;
		border-bottom: solid 6rpx #FD973F;
	}
</style>
